<!DOCTYPE html>
<html lang="es">
    <head>
        <title>API Youtube</title>
        <meta http-equiv='Content-Type' content='text/html; charset=UTF-8'>

        <link rel='StyleSheet' href='css/youtube.css' type='text/css'>

        <script src='js/jquery-1.7.2.min.js'></script>
        <script src='js/jquery.xdr-transport.js'></script>
        <script src='js/swfobject.js'></script>

        <script>
            /* provide here the id of the video */
            var identifier = 'qrrosELRyss';

            var params = {allowScriptAccess: 'always'};
            var atts = {id: 'video'};
            swfobject.embedSWF('http://www.youtube.com/v/' + identifier + '?enablejsapi=1&playerapiid=ytplayer', 'ytapiplayer', '425', '356', '8', null, null, params, atts);

            function onYouTubePlayerReady(playerId) {
                ytplayer = document.getElementById('video');

                $('#data a').bind('click', function(e){
                    e.preventDefault();
                    var originalUrl = $(this).attr('href');
                    var url = originalUrl.split('=')[1];
                    ytplayer.loadVideoByUrl('http://www.youtube.com/v/' + url + '?version=3');
                });
            };
            function collectData() {
                $.ajax({
                    url: 'http://gdata.youtube.com/feeds/api/videos/' + identifier + '/related?max-results=5&alt=json',
                    dataType: 'json',
                    cache: false,
                    success: function(data) {
                        var video = data.feed.entry;
                        $(video).each (function(index){
                            var source = data.feed.entry[index].link[0]['href'];
                            var thumb = data.feed.entry[index].media$group.media$thumbnail[1]['url'];
                            var title = data.feed.entry[index].title['$t'];
                            var duration = data.feed.entry[index].media$group.yt$duration['seconds'];
                            var viewCount = data.feed.entry[index].yt$statistics['viewCount'];

                            $('#data').append('<li><a href="' + source + '"><img src="' + thumb + '"/></a><div class="text"><h2>Title: ' + title + '</h2><h3> Duration: ' + duration + ' seconds</h3><h4> Viewed: ' + viewCount + ' times</h4></li>')
                        });
                    }
                });
            }
            $(document).ready(function () {
                collectData();
            });
        </script>

        <!--[if lt IE 9]>
            <script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
        <![endif]-->

    </head>

    <body>

        <div id="wrapper">

            <div id="videoPlayer">

                <div id="ytapiplayer">
                    <p>You need Flash player 8+ and JavaScript enabled to view this video.</p>
                </div><!-- #ytapiplayer -->

            </div><!-- #videoplayer -->

            <ul id="data"></ul><!-- #data -->

        </div><!-- #wrapper -->
    </body>
</html>